<template>
  <div id="earlyStageAchievementRecheck" class="app-container">
    <div class="filter-container">
      <el-form :inline="true" label-position="right" label-width="200px" class="demo-form-inline">
        <!-- <el-form-item label="权利人">
          <el-input style="width: 200px;" v-model="listQuery.realName" placeholder="" class="filter-item" />
        </el-form-item>
        <el-form-item label="权利人身份证号">
          <el-input style="width: 200px;" v-model="listQuery.applicantIdCardNum" placeholder="" class="filter-item" />
        </el-form-item>
        <el-form-item label="片块名称">
          <el-input style="width: 200px;" v-model="listQuery.projectName" placeholder="" class="filter-item" />
        </el-form-item>
         <el-form-item label="所在乡镇">
          <el-input style="width: 200px;" v-model="listQuery.projectName" placeholder="" class="filter-item" />
        </el-form-item>
         <el-form-item label="行政村名称">
          <el-input style="width: 200px;" v-model="listQuery.projectName" placeholder="" class="filter-item" />
        </el-form-item>
        <el-form-item label="复垦类型">
          <el-select placeholder="" style="width: 200px;" v-model="listQuery.level" clearable class="filter-item">
            <el-option label="区县级" value="DISTRICT" />
            <el-option label="市级" value="CITY" />
          </el-select>
        </el-form-item>-->
        <!-- <el-form-item label="是否属于二调遗漏复垦点">
          <el-select placeholder="" style="width: 200px;" v-model="listQuery.level" clearable class="filter-item">
            <el-option label="区县级" value="DISTRICT" />
            <el-option label="市级" value="CITY" />
          </el-select>
        </el-form-item>-->
        <!-- <el-form-item>
          <el-button type="primary" icon="el-icon-search">查询</el-button>
        </el-form-item>-->
      </el-form>
    </div>
    <div class="allTable">
      <el-table
        :header-cell-style="{background:'#f9f9f9',color:'#606266',fontSize:'12px'}"
        v-loading="listLoading"
        :data="list1"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <!-- <el-table-column type="index" align="center" label="内业是否存在疑问" width="200">
      </el-table-column>
      <el-table-column label="外业核查结果" width="150">
        <template slot-scope="scope">{{ scope.row.author }}</template>
      </el-table-column>
      <el-table-column label="复审结果" align="center" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
        </el-table-column>-->
        <el-table-column label="权利人" align="center" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.applicantName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="片块名称" align="center" min-width="150">
          <template slot-scope="scope">{{ scope.row.landName }}</template>
        </el-table-column>
        <el-table-column class-name="status-col" label="红线面积" align="center" width="120">
          <template slot-scope="scope">{{ scope.row.hxmj | M2 }}</template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="乡镇" width="100">
          <template slot-scope="scope">{{ scope.row.town!=null?scope.row.town.name:''}}</template>
        </el-table-column>
        <el-table-column align="center" label="村社" width="100">
          <template slot-scope="scope">{{ scope.row.village!=null?scope.row.village.name:''}}</template>
        </el-table-column>
        <el-table-column align="center" label="图幅号" width="120">
          <template slot-scope="scope">{{ scope.row.tfh }}</template>
        </el-table-column>
        <el-table-column align="center" label="图斑号" width="100">
          <template slot-scope="scope">{{ scope.row.tbh }}</template>
        </el-table-column>
        <el-table-column align="center" label="图斑面积" width="150">
          <template slot-scope="scope">{{ scope.row.tbmj | M2 }}</template>
        </el-table-column>
        <el-table-column align="center" label="建设用地复垦面积" width="180">
          <template slot-scope="scope">{{ scope.row.jsydfkmj | M2 }}</template>
        </el-table-column>
        <el-table-column align="center" label="宅基地面积" width="120">
          <template slot-scope="scope">{{ scope.row.zjdmj | M2 }}</template>
        </el-table-column>
        <el-table-column align="center" label="宅基地附属用地面积" width="180">
          <template slot-scope="scope">{{ scope.row.zjdfsydmj | M2 }}</template>
        </el-table-column>
        <el-table-column align="center" label="复垦类型" width="100">
          <template
            slot-scope="scope"
          >{{ scope.row.reclaimTypeDto!=null?scope.row.reclaimTypeDto.name:'' }}</template>
        </el-table-column>
        <el-table-column align="center" label="是否属于二调遗漏复垦点" width="200">
          <template
            slot-scope="scope"
          >{{ scope.row.isSecondMovingReclaimPointDto!=null?scope.row.isSecondMovingReclaimPointDto.name:'' }}</template>
        </el-table-column>
        <el-table-column align="center" label="初审规模与送审规模是否一致" width="220">
          <template
            slot-scope="scope"
          >{{ scope.row.isIdenticalScaleDto!=null?scope.row.isIdenticalScaleDto.name:'' }}</template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
        @size-change="handleSizeChange1"
        @current-change="handleCurrentChange1"
        :current-page="listQuery.page"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>-->
    </div>
    <div class="filter-container">
      <el-form
        :inline="true"
        label-position="right"
        class="demo-form-inline"
        style="margin-top:20px;"
      >
        <el-form-item label="抽取比例">
          <div class="chouquBox">
            <el-input
              :readonly="isLook"
              style="width: 200px;"
              v-model="chouquValue"
              placeholder
              class="filter-item"
            />
            <div class="baifenbiIcon">%</div>
          </div>
          <!-- <el-input style="width: 200px;" v-model="chouquValue" placeholder="" class="filter-item" /> -->
        </el-form-item>
        <el-form-item>
          <el-button
            :disabled="isLook"
            type="primary"
            v-loading.fullscreen.lock="fullscreenLoading"
            @click="chouqu"
          >抽取</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- <div class="filter-container">
      <el-button class="filter-item" type="primary" icon="el-icon-edit">添加</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="danger">删除所选</el-button>
    </div>-->
    <div class="fuzhushencha">
      <el-button :disabled="isLook" @click="fuzheCha" v-show="aruData">辅助审查</el-button>
    </div>
    <el-table
      v-show="aruData"
      :header-cell-style="{background:'#f9f9f9',color:'#606266',fontSize:'12px'}"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <!-- <el-table-column type="index" align="center" label="内业是否存在疑问" width="200">
      </el-table-column>
      <el-table-column label="外业核查结果" width="150">
        <template slot-scope="scope">{{ scope.row.author }}</template>
      </el-table-column>
      <el-table-column label="复审结果" align="center" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>-->
      <el-table-column label="权利人" align="center" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.applicantName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="片块名称" align="center" min-width="150">
        <template slot-scope="scope">{{ scope.row.landName }}</template>
      </el-table-column>
      <el-table-column class-name="status-col" label="红线面积" align="center" width="120">
        <template slot-scope="scope">{{ scope.row.hxmj | M2 }}</template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="乡镇" width="100">
        <template slot-scope="scope">{{ scope.row.town!=null?scope.row.town.name:''}}</template>
      </el-table-column>
      <el-table-column align="center" label="村社" width="80">
        <template slot-scope="scope">{{ scope.row.village!=null?scope.row.village.name:''}}</template>
      </el-table-column>
      <el-table-column align="center" label="图幅号" width="120">
        <template slot-scope="scope">{{ scope.row.tfh }}</template>
      </el-table-column>
      <el-table-column align="center" label="图斑号" width="100">
        <template slot-scope="scope">{{ scope.row.tbh }}</template>
      </el-table-column>
      <el-table-column align="center" label="图斑面积" width="120">
        <template slot-scope="scope">{{ scope.row.tbmj | M2 }}</template>
      </el-table-column>
      <el-table-column align="center" label="建设用地复垦面积" width="180">
        <template slot-scope="scope">{{ scope.row.jsydfkmj | M2 }}</template>
      </el-table-column>
      <el-table-column align="center" label="宅基地面积" width="120">
        <template slot-scope="scope">{{ scope.row.zjdmj | M2 }}</template>
      </el-table-column>
      <el-table-column align="center" label="宅基地附属用地面积" width="180">
        <template slot-scope="scope">{{ scope.row.zjdfsydmj | M2 }}</template>
      </el-table-column>
      <el-table-column align="center" label="复垦类型" width="100">
        <template
          slot-scope="scope"
        >{{ scope.row.reclaimTypeDto!=null?scope.row.reclaimTypeDto.name:'' }}</template>
      </el-table-column>
      <el-table-column align="center" label="是否属于二调遗漏复垦点" width="200">
        <template
          slot-scope="scope"
        >{{ scope.row.isSecondMovingReclaimPointDto!=null?scope.row.isSecondMovingReclaimPointDto.name:'' }}</template>
      </el-table-column>
      <el-table-column align="center" label="初审规模与送审规模是否一致" width="200">
        <template
          slot-scope="scope"
        >{{ scope.row.isIdenticalScaleDto!=null?scope.row.isIdenticalScaleDto.name:'' }}</template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination
      v-show="aruData"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="listQuery.page"
      :page-sizes="[10, 15, 20, 25]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>-->
  </div>
</template>

<script>
import { getList } from "@/api/table";
import {
  queryProjectLandByExtractiveRatio,
  queryProjectLandRelatedInfo,
  showLaterExtractiveResult
} from "@/api/jungongcehuiResultFuShen";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      isLook: false,
      fullscreenLoading: false,
      aruData: false,
      activeName: "1",
      list: null,
      list1: null,
      listLoading: true,
      listQuery: {
        page: 1,
        size: 10,
        projectName: null,
        realName: null,
        level: null,
        applicantIdCardNum: null
      },
      total: 0, //总数
      chouquValue: 20 //抽取值
    };
  },
  created() {
    if (localStorage.getItem("lookStatus") == 2) {
      this.isLook = true;
    }
    // this.fetchData();
    this.allData();
    this.showResult();
  },
  methods: {
    //回显抽取结果
    showResult() {
      var data = {
        projectId: localStorage.getItem("projectId")
      };
      showLaterExtractiveResult(data).then(res => {
        if (res.data.laterResult && res.data.laterResult.length != 0) {
          this.aruData = true;
          this.list = res.data.laterResult;
        }
      });
    },
    //前往辅助审查
    fuzheCha() {
      console.log(this.list);
      var arr = [];
      this.list.forEach((v, i) => {
        arr.push(v.landId);
      });
      var ids = arr.join(",");
      this.$router.push({
        path: "/jungongcehuiResultFuShen/qianqichjgcs/list",
        query: {
          id: ids
        }
      });
    },
    //全数据
    allData() {
      this.listLoading = true;
      var obj = {
        projectId: localStorage.getItem("projectId") * 1
      };
      queryProjectLandRelatedInfo(obj).then(res => {
        this.list1 = res.data;
        this.listLoading = false;
      });
    },

    //抽取
    chouqu() {
      this.fullscreenLoading = true;
      var obj = {
        projectId: localStorage.getItem("projectId") * 1,
        extractiveRatio: this.chouquValue
      };
      if (this.chouquValue == "") {
        obj.extractiveRatio = 0;
      }
      queryProjectLandByExtractiveRatio(obj).then(res => {
        console.log(res);
        this.list = res.data;
        if (this.list != null && this.list.length != 0) {
          this.aruData = true;
        } else {
          this.aruData = false;
        }
        this.fullscreenLoading = false;
      });
    },
    //改变每页显示条数
    handleSizeChange(e) {
      console.log(e);
    },
    //改变页码
    handleCurrentChange(num) {
      console.log(num);
    },
    fetchData() {
      this.listLoading = true;
      getList().then(response => {
        this.list = response.data.items;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>
<style lang="scss" scoped>
#earlyStageAchievementRecheck /deep/ .el-tabs__nav-wrap::after {
  height: 1px;
}
.inputItem {
  display: flex;
  align-items: center;
}

.chouquBox {
  position: relative;
}
.baifenbiIcon {
  position: absolute;
  right: 10px;
  top: 0;
  color: #97a8be;
}
.chouquBox /deep/ .el-input__inner {
  padding-right: 30px;
}
.inputItem p {
  font-size: 14px;
  margin: 0;
  margin-right: 10px;
}
.allTable {
  margin-bottom: 20px;
}
.fuzhushencha {
  margin-left: 50px;
  margin-bottom: 20px;
}
</style>
